<template>
  <div>
    
    <Card class="marginB10">

      <div class="marginB20">
        <div class="marginB20 cRed">
          商标担保注册说明：<br/>
          1、流程：用户下单付款→客服审核是否担保→审核通过递交商标局/审核不通过订单取消，费用退回原支付账号。<br/>
          2、以收到商标局驳回通知书为准，如全部驳回则退全款（含官费），仅部分驳回无退款。<br/>
          3、商标担保注册暂时只支持文字商标。
        </div>

        
          
          
        <div class="TJ_big" >
          
          <div class="TJ_box  " style="width:600px;">
            <div v-show="showZname">
              <Input
                search
                enter-button="生成"
                placeholder="请输入商标名称"
                style="width:350px;"
                class=" pullLeft marginR20 marginB10"
                v-model="zName1"
                ref="zName1"
                @on-search="toK"
                @on-change="toK_Change"
              />
              <div class="clearBoth"></div>
              <div class=" f_12 c999 marginB20">默认以 “微软雅黑字样自左向右排列” 递交官方；</div>
              <div class="clearBoth"></div>
            </div>
            

            <div
              class="marginB20 pointer"
              style="width:120px;"
              v-show="$app.judgeData(img_path.file_url)" 
              @click="$app.openWindow(img_path.file_url)"
            >
              <div class="JC_img width100 tran3 relative overflowH">
                <img :src="img_path.file_url"  class="InputShowImg cover" />
              </div>
              <div class="f_12 c999 textCenter paddingT10">点击查看大图</div>
            </div>

            <div class="clearBoth"></div>

          </div>
        </div>

        <div class="TJ_big">
          <div class="TJ_box borderNone">
            <div class="">
              <Input
                type="textarea"
                v-model="remark"
                ref="remark"
                :rows="4"
                placeholder="选填，仅用于填写商标图样说明"
                clearable
                style="width: 600px"
                size="large"
              />
            </div>
          </div>
        </div>

      </div>
      
      

      
      <ul class="tableNav marginB20 " v-show="!$app.judgeData(orderInfo)">
        <li class="tran3" :class=" whoShow==1 &&' active'" @click="poWY(1)">智能推荐</li>
        <li class="tran3" :class=" whoShow==2 &&' active'" @click="poWY(2)">自助选择</li>
      </ul>
      <div class=" paddingLi f_16 marginB20" style="background-color:#f3f3f3;">
        <Icon type="md-warning relative cRed marginR10" style="top:-2px;" size="24" />
        需要保护的商品/服务项目 (每一类别为{{allK}}元，包含10个小分类，超出10个，每个{{item_fee}}元)
      </div>

      <template v-if="whoShow!=99">
        <Z1 ref="Z1" :whoShow="whoShow" @orWInput="orWInput"/>
        <!-- 担保注册-自助选择-不做search框-领导确认过-计算量实现不了 -->
        <Z2 ref="Z2" :whoShow="whoShow" @orWInput="orWInput" :orderInfo="orderInfo"/>
      </template>
      <template v-else>
        <Z3 ref="Z3" :whoShow="whoShow" :cglist="orderInfo.cg_list"/>
      </template>
      
    </Card>

  </div>
</template>


<script>
import Z1 from "./z1";//智能选择
import Z2 from "./z2";//自助选择
import Z3 from "./z3";//纯粹看
export default {
  name: "b3",
  components: {Z1,Z2,Z3},
  props:['orderInfo'],//编辑订单时传过来的商标数据
  data() {
    let {
      $route: {
        query: {
          tm_name
        }
      }
    } = this;
    
    let {
      tm_guarantee_register:{
        base_official_fee,
        base_service_fee,
        item_fee
      }
    }=$app.getSession('bigSetting');

    let data = {
      allK:parseFloat(base_official_fee)+parseFloat(base_service_fee),
      item_fee:parseFloat(item_fee),
    };

    let tool = {
      whoShow:1,//1智能推荐,2自助选择,99隐藏不给你编辑
    };

    let B1_data = {
      tm_name,//页面带过来的注册商标名
      remark:'',//商标说明

    
      zName1: $app.judgeData(tm_name)?tm_name:"", //商标名称 纯文字

      img_path: {//图片
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      },

      //商标类型
      xTlex: 1,//第一排
      xPiw: 1,//第二排

      showZname:true,
    };
    
    return Object.assign(data, tool, B1_data);
  },
  watch:{
    orderInfo(newVal,oldVal){
      this.orderInfo = newVal;
      if($app.judgeData(newVal)){
        if(newVal.state==5 || newVal.state==10 || newVal.state==2 ){//补正
          // 担保注册，没有补正操作
          this.whoShow=99;// 担保注册修改订单，不给你改商标类型
          this.showZname=false;//担保注册，不给你改商标
        }else{//修改订单
          this.whoShow=2;// 担保注册修改订单，不给你改商标类型
        }
      }else{
        this.whoShow=1;
      }
    }
  },
  mounted() {

    let {tm_name } = this;

    if($app.judgeData(tm_name)){//地址栏有，要注册的商标名带进来
      this.toK();
    }
    
  },
  methods: {
    //选项卡切换
    poWY(i){
      this.whoShow=i;
    },
    //获取商标文字
    orWInput(callBack){
      let text=this.zName1;
      
      if($app.judgeData($app.delSpace(text))){
        let img=this.img_path.file_url
        if($app.judgeData(img)){
          callBack(text)
        }else{
          this.toK(()=>{
            callBack(text)
          });
        }
      }else{
        this.$Message.error({content:'请输入需注册的商标名称'})
        this.$refs['zName1'].focus();
        this.zName1='';
      }
    },


    //文字 to 图片
    toK(callBack){
      let {zName1}=this;
      let value=$app.delSpace(zName1);
      if(!$app.judgeData(value) ){
        this.$Message.error({content:'商标名称不能为空'});
      }else{
        $ajax.upMakeTmImage(value,resData=>{
          this.img_path=resData;

          callBack instanceof Function && callBack();
        });
      }
    },
    toK_Change(){
      this.img_path={//图片
        file_url: "", //前端展示路径
        file_path: "" //上传给后台的路径
      };

      this.$refs['Z1'].b0_Z();
      this.$refs['Z2'].b0_Z();

    }
  }
};
</script>

